<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>Title</title>
    {{include 'pages/base/layout.html'}}

    <script type="text/javascript" src="{{=URL('static','adminlte/plugins/zTree/v3/js/jquery.ztree.core-3.5.js')}}"></script>
    <script type="text/javascript" src="{{=URL('static','adminlte/plugins/zTree/v3/js/jquery.ztree.excheck-3.5.js')}}"></script>
    <script type="text/javascript" src="{{=URL('static','adminlte/plugins/zTree/v3/js/jquery.ztree.exedit-3.5.js')}}"></script>
    <link rel="stylesheet" href="{{=URL('static','adminlte/plugins/zTree/v3/css/zTreeStyle/zTreeStyle.css')}}" type="text/css">
</head>
    <SCRIPT type="text/javascript">
        <!--
        var setting = {
            view: {
                addHoverDom: addHoverDom,
                removeHoverDom: removeHoverDom,
                selectedMulti: false
            },
            edit: {
                enable: true,
                editNameSelectAll: false
            },
            data: {
                simpleData: {
                    enable: true
                }
            },
            callback: {
                beforeDrag: beforeDrag,
                beforeEditName: beforeEditName,
                beforeRemove: beforeRemove,
                beforeRename: beforeRename,
                onRemove: onRemove,
                onRename: onRename,
                onClick: onClick
            }
        };
        var zNodes=[{{for row in factor:}}{id:'{{=row.id}}',pId:'{{=row.parent_id}}',name:'{{=row.name}}'},{{pass}}];
        var zNodes1 =[
            { id:1, pId:0, name:"父节点 1", open:true},
            { id:11, pId:1, name:"叶子节点 1-1",target:"mainFrame" ,url:"{{=URL('demo','demoform')}}" },
            { id:12, pId:1, name:"叶子节点 1-2"},
            { id:13, pId:1, name:"叶子节点 1-3"},
            { id:2, pId:0, name:"父节点 2", open:true},
            { id:21, pId:2, name:"叶子节点 2-1"},
            { id:22, pId:2, name:"叶子节点 2-2"},
            { id:23, pId:2, name:"叶子节点 2-3"},
            { id:3, pId:0, name:"父节点 3", open:true},
            { id:31, pId:3, name:"叶子节点 3-1"},
            { id:32, pId:3, name:"叶子节点 3-2"},
            { id:33, pId:3, name:"叶子节点 3-3"}
        ];
        var log, className = "dark";
        function beforeDrag(treeId, treeNodes) {
            return false;
        }
        function beforeEditName(treeId, treeNode) {
            className = (className === "dark" ? "":"dark");
            showLog("[ "+getTime()+" beforeEditName ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            return confirm("进入节点 -- " + treeNode.name + " 的编辑状态吗？");
        }
        function beforeRemove(treeId, treeNode) {
            className = (className === "dark" ? "":"dark");
            showLog("[ "+getTime()+" beforeRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.selectNode(treeNode);
            return confirm("确认删除 节点 -- " + treeNode.name + " 吗？");
        }
        function onRemove(e, treeId, treeNode) {
            $.ajax({
                    type: 'POST',
                    url: '{{=URL('demo','deleteFactor')}}',
                    data: {id:treeNode.id},
                    success: function (data) {
                    }
                });

            showLog("[ "+getTime()+" onRemove ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        }
        function beforeRename(treeId, treeNode, newName) {
            className = (className === "dark" ? "":"dark");
            showLog("[ "+getTime()+" beforeRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
            if (newName.length == 0) {
                alert("节点名称不能为空.");
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");
                setTimeout(function(){zTree.editName(treeNode)}, 10);
                return false;
            }
            return true;
        }
        function onRename(e, treeId, treeNode) {
            $.ajax({
                    type: 'POST',
                    url: '{{=URL('demo','updateFactor')}}',
                    data: {id:treeNode.id,name:treeNode.name},
                    success: function (data) {
                    }
                });
            showLog("[ "+getTime()+" onRename ]&nbsp;&nbsp;&nbsp;&nbsp; " + treeNode.name);
        }
        function showLog(str) {
            if (!log) log = $("#log");
            log.append("<li class='"+className+"'>"+str+"</li>");
            if(log.children("li").length > 8) {
                log.get(0).removeChild(log.children("li")[0]);
            }
        }
        function getTime() {
            var now= new Date(),
            h=now.getHours(),
            m=now.getMinutes(),
            s=now.getSeconds(),
            ms=now.getMilliseconds();
            return (h+":"+m+":"+s+ " " +ms);
        }

        var newCount = 1;
        function addHoverDom(treeId, treeNode) {
            var sObj = $("#" + treeNode.tId + "_span");
            if (treeNode.editNameFlag || $("#addBtn_"+treeNode.id).length>0) return;
            var addStr = "<span class='button add' id='addBtn_" + treeNode.id
                + "' title='add node' onfocus='this.blur();'></span>";
            sObj.after(addStr);
            var btn = $("#addBtn_"+treeNode.id);
            if (btn) btn.bind("click", function(){
                var zTree = $.fn.zTree.getZTreeObj("treeDemo");

                $.ajax({
                    type: 'POST',
                    url: '{{=URL('demo','insertFactor')}}',
                    data: {pid:treeNode.id},
                    success: function (data) {
                          zTree.addNodes(treeNode, {id:data.id, pId:treeNode.id, name:data.name});
                    }
                });
                return false;

            });
        };
        function removeHoverDom(treeId, treeNode) {
            $("#addBtn_"+treeNode.id).unbind().remove();
        };

        function onClick(event, treeId, treeNode) {
            $('#mainFrame').attr("src","{{=URL('demo','demoform1')}}"+"?id="+treeNode.id);
        };

        function selectAll() {
            var zTree = $.fn.zTree.getZTreeObj("treeDemo");
            zTree.setting.edit.editNameSelectAll =  $("#selectAll").attr("checked");
        }

        $(document).ready(function(){
            $.fn.zTree.init($("#treeDemo"), setting, zNodes);
            $("#selectAll").bind("click", selectAll);
        });
        //-->
    </SCRIPT>
<style type="text/css">
</style>
<body>

<div class="container"  >
  <div class="row"  >
   <div class="col-sm-4">
     <ul id="treeDemo" class="ztree"></ul>
   </div>
   <div class="col-sm-8" style=" height: 300px;" >
    <iframe id="mainFrame" name="mainFrame" src="" style=" width: 100%; height: 100%; padding: 0;"  frameborder="0" ></iframe>
   </div>

  </div>
</div>

</body>
</html>